<template>
  <el-card class="monitor-quality-list">
    <tag-content-header search refresh setting @toolFun="toolFun" :settingData="columns">
      <template #title>
        <span class="title-text">标签质量列表</span>
      </template>
      <template #tools>
        <el-tooltip effect="dark" content="导出" placement="top" slot="reference">
          <el-button type="primary" plain circle @click="handleDownload">
            <icon-svg name="iconDownload"></icon-svg>
          </el-button>
        </el-tooltip>
      </template>
    </tag-content-header>
    <tag-table
      ref="table"
      @refresh="getList"
      :data="dataList"
      :loading="loading"
      :columns="columns"
      :params="params"
      :total="totalSize"
    >
      <template #tagNm="{ scope }">
        <span class="click-item" @click="goInfomation(scope.row)">{{ scope.row.tagNm }}</span>
      </template>
      <template #dataQuality="{ scope }">
        <el-tag :type="qualityClass(scope.row.dataQuality)">
          <icon-svg :name="qualityIcon(scope.row.dataQuality)"></icon-svg>
          {{ showQuality(scope.row.dataQuality) }}
        </el-tag>
      </template>
      <template #applicationHeat="{ scope }">
        <el-tag :type="qualityClass(scope.row.applicationHeat)">
          <icon-svg :name="qualityIcon(scope.row.applicationHeat)"></icon-svg>
          {{ showQuality(scope.row.applicationHeat) }}
        </el-tag>
      </template>
      <template #businessQuality="{ scope }">
        <el-tag :type="qualityClass(scope.row.businessQuality)">
          <icon-svg :name="qualityIcon(scope.row.businessQuality)"></icon-svg>
          {{ showQuality(scope.row.businessQuality) }}
        </el-tag>
      </template>
      <template #operation="{ scope }">
        <div class="operation-button-box">
          <el-tooltip
            effect="dark"
            :content="scope.row.assetStatus ? '下线标签' : '上线标签'"
            placement="top"
            :enterable="false"
          >
            <el-switch
              active-color="#13ce66"
              v-model="scope.row.assetStatus"
              :active-value="1"
              :inactive-value="0"
              @change="toggleStatus(scope.row)"
            >
            </el-switch>
          </el-tooltip>
        </div>
      </template>
    </tag-table>
    <info-modify-dialog ref="infoModifyDialog" @callback="confirmModify" @cancel="getList"></info-modify-dialog>
  </el-card>
</template>

<script>
import monitor from '../monitor.js'
import infoModifyDialog from '@/views/modules/information/information-modify-dialog'
export default {
  components: {
    infoModifyDialog
  },
  data() {
    const filterList = [{ key: '优秀', value: '1' }, { key: '良好', value: '2' }, { key: '预警', value: '3' }]
    return {
      dataList: [],
      loading: false,
      columns: [
        {
          show: true,
          label: '标签名称',
          prop: 'tagNm',
          search: true,
          searchKey: ''
        },
        {
          show: true,
          label: '数据质量',
          prop: 'dataQuality',
          search: true,
          searchKey: '',
          searchType: 'select',
          searchList: filterList,
          align: 'center'
        },
        {
          show: true,
          label: '应用热度',
          prop: 'applicationHeat',
          search: true,
          searchKey: '',
          searchType: 'select',
          searchList: filterList,
          align: 'center'
        },
        {
          show: true,
          label: '业务质量',
          prop: 'businessQuality',
          search: true,
          searchKey: '',
          searchType: 'select',
          searchList: filterList,
          align: 'center'
        },
        {
          show: 'fixed',
          label: '操作',
          prop: 'operation',
          align: 'center',
          width: 200
        }
      ],
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      },
      totalSize: 0,
      selectAsset: {}
    }
  },
  methods: {
    getList() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('tag/tagQuality/selectTagQualityPage'),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.dataList = data.data.records
          this.totalSize = data.data.totalSize
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    toolFun(operation) {
      switch (operation) {
        case 'search':
          // 搜索动作
          this.$refs['table'].searchToggle()
          break
        case 'refresh':
          // 刷新动作
          this.getList()
          break
      }
    },
    toggleStatus(scope) {
      this.$confirm(`确定${!scope.assetStatus ? '下线' : '上线'}标签【${scope.tagNm}】`)
        .then(() => {
          this.selectAsset = Object.assign({}, scope, { assetStatus: !scope.assetStatus })
          if (!scope.assetStatus) this.$refs.infoModifyDialog.showDialog()
          else this.changeStatus()
        })
        .catch(() => {
          this.getList()
        })
    },
    confirmModify(reason) {
      this.changeStatus(reason)
    },
    changeStatus(reason = '') {
      this.$ajax({
        url: this.$ajax.setUrl('ast/astDataAsset/updateAssetStatus'),
        method: 'post',
        data: this.$ajax.setData({
          assetId: this.selectAsset.tagId,
          status: Number(!this.selectAsset.assetStatus),
          modifyReason: reason
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$message.success(data.msg)
          this.getList()
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    showQuality(status) {
      return monitor.showQuality(status)
    },
    qualityClass(status) {
      return monitor.showClass(status)
    },
    qualityIcon(status) {
      return monitor.showIcon(status)
    },
    handleDownload() {
      this.$ajax({
        url: this.$ajax.setUrl('tag/tagQuality/getTagQualityFiledId'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$dlFile(data.data)
          this.$message.success(data.msg)
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    goInfomation(row) {
      this.$router.push({ name: 'information', query: { tagNm: row.tagNm } })
    }
  }
}
</script>

<style lang="scss">
.monitor-quality-list {
  .el-tag {
    font-size: 15px;
    color: #fff;
    svg {
      width: 16px;
      height: 16px;
      margin: -5px 5px 0 0;
      vertical-align: middle;
    }
  }
  .el-tag--info {
    background-color: #ccc;
  }
  .el-tag--success {
    background-color: #45bf7b;
  }
  .el-tag--warning {
    background-color: #3ab2d0;
  }
  .el-tag--danger {
    background-color: #fd7037;
  }
  .operation-button-box {
    svg {
      margin-right: 0;
    }
  }
}
</style>
